<template>
  <div>
    <h1>{{ state.msg }}</h1>
    <h1>{{ name }}---{{ age }}</h1>
    <button @click="changeData">changeData</button>
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue';

export default {
  setup() {
    const state = reactive({
      msg: 'hello vue',
    });

    const name = ref('code');
    const age = ref(18);

    const changeData = () => {
      state.msg = '更新了';
      name.value = 'fly';
      age.value = 20;
    };

    //  reactive
    watch(
      () => state.msg,
      (val, oldVal) => {
        console.log(val, oldVal);
      }
    );

    // ref
    // watch(name, (val, oldVal) => {
    //   console.log(val, oldVal);
    // });

    watch(
      [name, age],
      ([name, age], [preName, preAge]) => {
        console.log(name, age);
        console.log(preName, preAge);
        console.log(1);
      },
      {
        // 立即执行
        immediate: true,
        // 深度监听
        deep: true,
      }
    );

    return {
      state,
      name,
      age,
      changeData,
    };
  },
};
</script>

<style lang="scss" scoped></style>
